<template>
  <div>
    <van-nav-bar
      :title="
        topCommentItem.reply_count > 0
          ? `${topCommentItem.reply_count}`
          : '无评论'
      "
      left-arrow
    >
      <template #left>
        <van-icon name="cross" @click="$emit('closepopup')" />
      </template>
    </van-nav-bar>
    <commentItem :comItem="topCommentItem" />
    <van-cell title="全部回复"></van-cell>
    <commentList
      type="c"
      :artId="topCommentItem.com_id"
      :newCommentObj="newCommentObj"
    ></commentList>
    <!-- 底部区域 -->
    <div class="reply-bottom">
      <van-button
        class="write-btn"
        size="small"
        @click="addPeplyCommentShow = true"
        round
        >写评论</van-button
      >
    </div>

    <!-- 发布评论弹层 -->
    <van-popup v-model="addPeplyCommentShow" position="bottom">
      <commentPost :artId="topCommentItem.com_id" @newpl="newpl" />
    </van-popup>
  </div>
</template>
<script>
import commentItem from "./commentItem.vue";
import commentList from "./commentList.vue";
import commentPost from "./commentPost.vue";
export default {
  props: {
    topCommentItem: Object,
  },
  components: {
    commentItem,
    commentList,
    commentPost,
  },
  data() {
    return {
      addPeplyCommentShow: false, //是否打开输入框弹层
      newCommentObj: {},
    };
  },
  methods: {
    newpl(obj) {
      this.addPeplyCommentShow = false;
      this.newCommentObj = obj;
      //评论完成之后 评论+1
      this.topCommentItem.reply_count++;
    },
  },
};
</script>
<style scoped lang="less">
.reply-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;
  .write-btn {
    width: 60%;
  }
}
</style>
